<script lang="ts"></script>

<template>
  <div class="comment-input-container">
    <textarea
      class="comment-textarea"
      placeholder="评论千万条，等你发一条"
      v-model="commentText"
    ></textarea>
    <div class="comment-input-footer">
      <div class="input-options">
        <i class="icon emoji-icon">😊</i>
        <i class="icon at-icon">@</i>
        <i class="icon image-icon">🖼️</i>
      </div>
      <button class="submit-button" @click="submitComment">发布</button>
    </div>
  </div>

  <view class="comment-section">
    <view
      v-for="(comment, index) in pageResult.list"
      :key="index"
      class="comment-item"
    >
      <view class="comment-header">
        <img :src="comment.userAvatar" alt="" class="avatar" />
        <view class="comment-info">
          <view class="username">{{ comment.username }}</view>
          <view class="time">{{ comment.time }}</view>
        </view>
      </view>
      <view class="comment-content">{{ comment.content }}</view>
    </view>
  </view>
  <view class="loading-text">{{ 1 ? "没有更多的数据 " : "正在加载..." }} </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { submitCommentApi, getCommentPageApi } from "@/api/comment/comment";
import type { CommnetPageDTO, PageResult } from "@/types/comment";

// 获取路由
const props = defineProps<{
  id: number; // 需要传入id
}>();

// 分页的文件记录
var pageResult = ref<PageResult>({
  total: 0,
  pages: 0,
  list: [],
});
// 分页的参数
var pageQuery = ref<CommnetPageDTO>({
  contributeId: props.id,
  isAsc: false,
  pageNo: 1,
  pageSize: 10,
});

const getMore = async () => {
  const result = await getCommentPageApi(pageQuery.value);
  // 拼接list
  pageResult.value.list = pageResult.value.list!.concat(result.data.list!);
  pageResult.value.total = result.data.total;
  // 往后来一页
  if (pageQuery.value.pageNo != null) {
    pageQuery.value.pageNo = pageQuery.value.pageNo + 1;
  }
};

// 获取数据的逻辑函数
const addPageResult = () => {
  // 到达底部的判断
  if (pageResult.value.total! <= pageResult.value.list!.length) {
    // 只展示一次
    uni.showToast({
      title: "到达最底啦",
      duration: 2000,
    });
    return;
  }
  // 获取
  getMore();
};

// 滑动到最底部的时候
const onLowestOfScroll = () => {
  console.log("到达最底部");
  addPageResult();
};

// 评论内容
var commentText = ref("");
const submitComment = async () => {
  // 提交评论
  var commentSubmit = {
    content: commentText.value,
    contributeId: props.id,
  };
  const res = (await submitCommentApi(commentSubmit)).data;
  uni.showToast({
    title: "提交成功",
    duration: 2000,
  });
  // 半秒后显示你的评论
  setTimeout(() => {
    pageResult.value.list?.unshift(res);
  }, 500);
};

onLoad(async () => {
  console.log("book-comment的props:", props);
  getMore();
});

// 暴露方法
defineExpose({
  onLowestOfScroll: onLowestOfScroll,
});
</script>

<style lang="scss">
@import "/src/assert/styles/variables.scss";

page {
  height: 100%;
}

/*
评论区
*/
.comment-section {
  width: 100%;
  padding: 5px;
  background-color: #f9f9f9;
}

.comment-item {
  padding: 5px;
  border-bottom: 1px solid #eee;
}

.comment-header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.time {
  font-size: 12px;
  color: #888;
}

.comment-content {
  font-size: 14px;
  color: #333;
}

.comment-input-container {
  border: 1px solid #e6e6e6;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;

  .comment-textarea {
    width: 100%;
    height: 60px;
    padding: 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 14px;
    resize: none;
    outline: none;
  }

  .comment-input-footer {
    display: flex;
    .submit-button {
      margin-top: 8px;
      background-color: $el-secondary-color;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .input-options {
      flex: 1;
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .icon {
      font-size: 18px;
      margin-right: 10px;
      cursor: pointer;
    }

    .share-checkbox {
      font-size: 14px;
      color: #666;
    }
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
